<!-- 个人中心 -->
<template>
	<view>
		<!-- 登录 -->
		<view class="information bg-gradual-green">
			<view v-if="logins_show" class="logins_heider">
				<view class="logins" @click="logsUrl()">
					登录
				</view>
			</view>

			<view v-else class="information_box">
				<view class="information_image">
					<image :src="logUrl" mode=""></image>
				</view>
				<view class="information_right">
					<view class="information_right_name">
						<text>{{restName}}</text>
						<!-- <button class="button_Phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">+ 绑定手机号</button> -->
					</view>
					<view class="information_right_grade" v-for="(item,index) in member" :key="index">
						<text v-if="item.memberGrade == 1">会员等级：青铜</text>
						<text v-if="item.memberGrade == 2">会员等级：白银</text>
						<text v-if="item.memberGrade == 3">会员等级：黄金</text>
						<text v-if="item.memberGrade == 4">会员等级：钻石</text>
						<view class="CardNumber">
							<text class="member">卡号：{{item.cardNumber}}</text>
						</view>
					</view>
				</view>
				<view class="information_right_member" v-for="(item,index) in member" :key="index">
					<view class="">
						积分：{{item.cardNumerical}}
					</view>
					<view class="">
						余额：{{item.cardBalance}}
					</view>
				</view>
			</view>
		</view>
		<!-- 消息提示 -->
		<!-- <view class="message_prompt">
			消息提示
		</view> -->

		<!-- 导航B -->
		<view class="user_nav">
			<view @tap="goUrl(item.url)" v-for="(item,index) in userNav">
				<text :class="item.src"></text>
				<view class="text_name">{{item.name}}</view>
			</view>
		</view>
		<!-- 链接 -->
		<view class="user_url">
			<view class="url_box">
				<view class="button_open_type_border">
					<view class="cuIcon-service text-olive"></view>
					<button class="button_open_type" type="button" open-type="contact" bindcontact="handleContact">联系客服</button>
				</view>
				<text class="url_jiao">›</text>
			</view>
			<view class="url_box" @tap="goUrl(item.url)" v-for="(item,index) in boxUrl">
				<view>
					<text :class="item.src"></text>
					<text class="url_box_name text_name">{{item.name}}</text>
				</view>
				<text class="url_jiao">›</text>
			</view>
		</view>
	</view>
</template>

<script>
	var rawData, _that;
	import { mapState } from 'vuex'
	import validateLogin from '../../components/validateLogon.vue'
	export default {
		components: {
			validateLogin
		},
		data() {
			return {
				opid: null,
				logins_show: true,
				logUrl: null,
				restName: null,
				max: 20,
				member: null, //会员信息
				loading: false,
				logtext: true,
				openids: '',
				title: 'Hello',
				nickName: '',
				avatarUrl: '',
				SessionKey: '',
				isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
				userInfo: [],
				userNav: [{
						name: "优惠券",
						src: "cuIcon-upstagefill text-red",
						url: "AllOrders"
					},
					{
						name: "抽奖",
						src: "cuIcon-discoverfill text-purple",
						url: "false"
					},
					// {
					// 	name: "待收货",
					// 	src: "cuIcon-deliver_fill text-blue",
					// 	url: "Coupon"
					// },
					{
						name: "订单详情",
						src: "cuIcon-newshotfill text-yellow",
						url: "Refund"
					}
				],
				boxUrl: [
					// {
					// 	num: 1,
					// 	name: "注册信息",
					// 	src: "cuIcon-notice text-olive",
					// 	url: "Coupon"
					// },
					{
						num: 2,
						name: "意见反馈",
						src: "cuIcon-mark text-olive",
						url: ""
					},
					{
						num: 3,
						name: "联系我们",
						src: "cuIcon-notice text-olive",
						url: ""
					}
				]
			}
		},
		onShow() {
			if (this.openid != ' ' && this.id != ' ') {
				this.userArr();
				this.restList();
				this.logins_show = false;
			} else {
				this.logins_show = true;
				return false
			}
		},
		onLoad(options) {},
		mounted() {},
		computed:{
			...mapState(['openid','id'])
		},
		methods: {
			//获取用户手机号
			getPhoneNumber(e) {
				console.log(e.detail.errMsg)
				console.log(e.detail.iv)
				console.log(e.detail.encryptedData)
			},
			handleContact(e) {},
			logsUrl() {
				uni.navigateTo({
					url: '../Login/login'
				})
			},
			userArr() {
				const userArr = uni.getStorageSync('userArr');
				this.userInfo = userArr
			},
			goReg() {
				uni.navigateTo({
					url: ""
				})
			},
			goUrl(url) {
				if (url == "false") {
					uni.showModal({
						title: "该功能暂未开放"
					})
				}
				uni.navigateTo({
					url: url
				})
			},
			//会员信息
			StringExchangeEmoji(str) {
				var reg = /\&#.*?;/g;
				var result = str.replace(reg, function(char) {
					var H, L, code;
					if (char.length == 9) {
						code = parseInt(char.match(/[0-9]+/g));
						H = Math.floor((code - 0x10000) / 0x400) + 0xD800;
						L = (code - 0x10000) % 0x400 + 0xDC00;
						return unescape("%u" + H.toString(16) + "%u" + L.toString(16));
					} else {
						return char;
					}
				});
				return result;
			},
			restList() {
				this.request.restList({
					id: this.id
				}).then(res => {
					let memberdata = res.rows.filter((item) => {
						return this.id == item.id
					})
					let logUrl = memberdata.map((item) => {
						return item.logUrl
					})
					let names = memberdata.map((item) => {
						return item.name
					})
					names = names.toString()
					let name = this.StringExchangeEmoji(names)
					this.logUrl = logUrl
					this.restName = name
					this.member = memberdata
				})
			},
			//点击事件：拨打电话
			phone(num) {
				this[num]()
			},
			call_phone() {
				// uni.makePhoneCall({
				// 	// 手机号
				// 	phoneNumber: '17854911768',
				// 	// 成功回调
				// 	success: (res) => {
				// 		console.log('调用成功!')
				// 	},
				// 	// 失败回调
				// 	fail: (res) => {
				// 		console.log('调用失败!')
				// 	}
				// });
			},
		}
	}
</script>

<style lang="scss">
	//提示消息
	.message_prompt {
		position: absolute;
		right: 0;
		left: 0;
		height: 60rpx;
		border-radius: 25rpx;
		background-color: #FFFFFF;
		color: #007AFF;
		margin: 0 58rpx;
		padding: 0 35rpx 0 35rpx;
		animation: myfirst 1s linear forwards;
	}

	@keyframes myfirst {
		0% {
			left: 0px;
			top: 276rpx;
		}
		100% {
			left: 0px;
			top: 116px;
		}
	}

	.button_Phone {
		font-size: 20rpx;
		width: 140rpx;
		height: 34rpx;
		line-height: 34rpx;
		background-color: #f37b1d;
		padding: 3rpx;
		border-radius: 25rpx;
		align-items: center;
	}

	.button_open_type_border {
		display: flex;
		width: 100%;
	}

	.button_open_type {
		background-color: #FFFFFF;
		margin-left: 20rpx;
		color: #333333;
		width: 100%;
		text-align: left;
		font-size: 32rpx;
	}

	.logins_heider {
		height: 130rpx;
		display: flex;
		margin-left: 56rpx;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.logins {
		background-color: #FFFFFF;
		border-radius: 25rpx;
		border: 1rpx solid #f37b1d;
		width: 200rpx;
		color: #f37b1d;
		font-size: 36rpx;
		text-align: center;

	}

	.information {
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		padding: 60rpx 25rpx 0 25rpx;
		height: 330rpx;

		.information_box {
			display: flex;
			margin-top: 15rpx;
		}

		.information_image {
			image {
				margin-left: 30rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #007AFF;
			}
		}

		.information_right {
			line-height: 50rpx;
			margin-left: 20rpx;
			color: #FFFFFF;

			.information_right_name,
			.information_right_grade {
				margin-top: 5rpx;
			}

			.information_right_name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 24rpx;
				}
			}

			.information_right_grade {
				text-align: center;
				font-size: 20rpx;
				width: 200rpx;
				height: 34rpx;
				line-height: 34rpx;
				background-color: #F2F2F2;
				border-radius: 25rpx;

				text {
					color: #3F536E;
				}

			}
		}
	}

	.cuprogress {
		width: 680rpx;
	}

	button {
		color: #FFFFFF;
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.btn {
		margin: 0 40rpx;
		margin-bottom: 40rpx;
		border-radius: 60rpx;
		background: $Theme-color;
		color: #FFFFFF;
	}

	.user_url {
		background-color: #FFFFFF;
		padding: 60rpx 40rpx;
		font-size: 32rpx;
		margin: 156rpx 40rpx 40rpx 40rpx;
		border-radius: 25rpx;
		width: 680rpx;

		.url_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 60rpx;
		}

		.url_jiao {
			font-size: 50rpx;
			color: #c5c9d9;
		}

		.url_box_name {
			margin-left: 20rpx;
		}

		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 40rpx;
		}
	}

	.user_nav {
		border-radius: 25rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 276rpx;
		right: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin: 0 35rpx;
		padding: 35rpx;
		font-size: 32rpx;

		text {
			font-size: 60rpx;
			display: block;
			margin-bottom: 10rpx;
			height: 55rpx;
		}
	}

	.user_nav_top {
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin: 0 35rpx;
		margin-top: 40rpx;
		padding-bottom: 50rpx;
		font-size: 20rpx;

	}

	.user {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 60rpx;
		padding-top: 150rpx;
		background-size: 100%;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.mex {
		content: "";
		top: 13px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		z-index: 100;
		display: inline-block;
		overflow: hidden;
		width: 12px;
		height: 12px;
		left: -6px;
		right: initial;
		background-color: inherit;
	}

	.member {
		color: #FFFFFF;
	}

	.information_right_member {
		margin-left: 130rpx;
	}

	.CardNumber {
		width: 260rpx;
		margin-top: 10rpx;
	}

	.text_name {
		color: #333333;
	}
</style>
